import React from 'react';
import clsx from 'clsx';
import { StyledMediumTextCardRow } from './MediumTextCardRow.styled';
import styles from './CardRow.module.scss';

/**
 * @typedef { Object } ICardRow - Интерфейс для компонента CardRow.
 * @property { string } label - Название строки.
 * @property { React.ReactElement } content - Компонент React для отображения в строке.
 * @property { React.ReactElement } action - Элемент для действия, кнопка или поле ввода. 
 * @property { string } className - Стили для CardRow.
 */
interface ICardRow {
    label?: string,
    content?: React.ReactElement;
    action?: React.ReactElement;
    className?: string;
}

/**
 * @function CardRow - Компонент для отображения строки в карточке страницы настроек.
 * @param { string } label - Название строки.
 * @param { React.ReactElement } content - Компонент React для отображения в строке.
 * @param { React.ReactElement } action - Элемент для действия, кнопка или поле ввода.
 * @param { string } className - Стили для CardRow.
 * @returns 
 */
const CardRow: React.FC<ICardRow> = ({ label, content, action, className }): React.ReactElement => (

    <div className={clsx(styles.cardContainer, className)}>
        <StyledMediumTextCardRow>
            {label}
        </StyledMediumTextCardRow>
        <div className={styles.contentContainer}>
            {content}
        </div>
        {
            action &&
            <div className={styles.actionContainer}>
                {action}
            </div>
        }
    </div>
);

export default CardRow;